@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .browser-window {
    @apply bg-white rounded-lg shadow-xl overflow-hidden border border-gray-200;
  }

  .browser-header {
    @apply bg-gray-100 px-4 py-2 flex items-center border-b border-gray-200;
  }

  .browser-controls {
    @apply flex space-x-2;
  }

  .browser-dot {
    @apply w-3 h-3 rounded-full;
  }

  .browser-dot-red {
    @apply bg-red-500;
  }

  .browser-dot-yellow {
    @apply bg-yellow-500;
  }

  .browser-dot-green {
    @apply bg-green-500;
  }

  .browser-address-bar {
    @apply flex-1 mx-4 px-3 py-1 bg-gray-200 rounded text-sm text-gray-600;
  }

  .nav-item {
    @apply px-4 py-2 text-gray-600 hover:text-primary hover:bg-gray-50 rounded-lg transition-colors;
  }

  .nav-item.active {
    @apply text-primary bg-blue-50;
  }

  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-colors;
  }

  .btn-primary {
    @apply bg-primary text-white hover:bg-blue-600;
  }

  .btn-secondary {
    @apply bg-secondary text-white hover:bg-gray-600;
  }

  .card {
    @apply bg-white rounded-lg shadow-md p-6;
  }

  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent;
  }

  .table-container {
    @apply overflow-x-auto;
  }

  .table {
    @apply min-w-full divide-y divide-gray-200;
  }

  .table th {
    @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
  }

  .table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
  }

  .table tr:nth-child(even) {
    @apply bg-gray-50;
  }

  aside {
    @apply fixed top-0 left-0 h-screen overflow-y-auto;
  }

  main {
    @apply ml-64;
  }
}